<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="../css/animate/animate.min.css">
    <link rel="stylesheet" href="../css/detalis.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../mui/mui.min.css">
    <link rel="stylesheet" href="../mui/previewimage.css" />
    <script src="../js/flexible.js"></script>
    <link rel="stylesheet" href="../mui/mui.showLoading.css">
    <link rel="stylesheet" href="../css/swiper/swiper.min.css">
    <style>
        [v-cloak] {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div>
            <div class="material">
                <div class="material_image">
                    <div class="swiper-container" id="swiper-container">
                        <div class="swiper-wrapper" v-bind:style="styleObject">
                            <div class="swiper-slide slide" v-bind:style="styleObject" v-for="(item,index) in goods">
                                <div class="img">
                                    <img v-bind:data-preview-src="imgUrl+item.image_url"
                                        data-preview-group="2"
                                        v-bind:data-src="imgUrl+item.image_url+'?x-oss-process=image/resize,m_fill,w_500,h_500'"
                                        class="swiper-lazy">
                                </div>
                                <div class="swiper-lazy-preloader"></div>
                            </div>
                        </div>
                        <div class="swiper-pagination" id="swiper-pagination"></div>
                    </div>
                </div>
                <div class="goods_message">
                    <div class="good_title">
                        <div class="good_name" v-cloak>{{title}}</div>
                        <div class="good_price" v-cloak>
                            <div class="price">价格：
                                <div class="pce">￥{{shopPrice}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="specifications" @click="checkSpecifications()">
                    查看规格和属性
                    <div class="right">
                        <img src="../img/ico-right.png" alt="">
                    </div>
                </div>
                <div class="goods_details">
                    <div class="bg"></div>
                    <div class="title">商品详情</div>
                    <div class="content" v-html="content"></div>
                </div>
                <div class="shopDetail animated" :class={fadeInUpBig:!isActive,fadeOutDown:isActive} v-show="dialog">
                    <div class="header">
                        规格和参数
                    </div>
                    <div class="message_list_p">
                        <div class="message_list">
                            <div class="list">
                                <div class="left">品牌</div>
                                <div class="right">
                                    {{brandName}}
                                </div>
                            </div>
                            <div class="list">
                                <div class="left">规格</div>
                                <div class="right">
                                    <span
                                        v-for="(item,index) in attributeInfo"
                                        :key="index">
                                        {{item.att_name}}：<span v-for="(item,index) in item.value_list">{{item.att_item_name}} 
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <div class="list" v-for="(item,index) in specificationParam">
                                    <div class="left">{{item.att_name}}</div>
                                    <div class="right">
                                        <span>
                                            {{item.att_item_name}}
                                        </span>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="footer_p">
                        <div class="message_footer" @click="closeSpecifications()">
                            关闭
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer" @click="jump()">
                <div>
                    <img src="../img/ico_join@3x.png" alt="">
                </div>
                <div class="text">点我可入驻，买卖好粮油！</div>
            </div>
        </div>
    </div>
</body>
<script src="../js/plugins/axios.min.js"></script>
<script src="../js/plugins/vue.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="../js/swiper/swiper.min.js"></script>
<script src="../mui/mui.min.js"></script>
<script src="../mui/mui.zoom.js"></script>
<script src="../mui/mui.previewimage.js"></script>
<script src="../mui/mui.showLoading.js"></script>
<script src="../js/conmon/compoents.js"></script>
<script src="../js/config.js"></script>
</html>
<script>
    var host = appconfig.mallDevUrl;
    var imgUrl=appconfig.imgUrl;
    var app = new Vue({
        el: '#app',
        data: {
            styleObject: {
                height: "",
                lineHeight: ""
            },
            styleObject1: {
                height: "",
            },
            style: {
                opacity: 1,
            },
            goods: [
            ],
            title: "",
            shopPrice: "",
            content: "",
            dialog: false,
            isActive: false,
            flag: false,
            brandName: "",
            attributeInfo:[],
            specificationParam: [], //产品参数
            imgUrl:imgUrl
        },
        methods: {
            getUrl: function () {
                var url = decodeURI(location.search); //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            },
            jump(){
                window.location.href="../intention/index.html"
            },
            checkSpecifications() {
                this.mask.show();
                this.flag = false;
                this.dialog = true;
                this.isActive = false;
            },
            closeSpecifications() {
                this.isActive = true;
                this.flag = true;
                this.mask.close();
                setTimeout(() => {
                    this.dialog = false;
                }, 300);
            },
            getMessage: function () {
                mui.showLoading();
                var that = this;
                var id = that.theRequest.id
                axios({
                    method: "GET",
                    url: host + "/api/b2bmall/shopGoods/actions/queryDetail/" + id,
                }).then(function (res) {
                    mui.hideLoading();
                    if (res.data.code == "0") {
                        mui.hideLoading();
                        var data = res.data.body;
                        that.goods = data.images;
                        that.title = data.title;
                        that.shopPrice = data.shopPrice;
                        that.content = data.description;
                        if(data.brand!==undefined){
                            that.brandName = data.brand.brandName;
                        }
                        that.attributeInfo=data.attributeInfo;
                        that.specificationParam=data.specificationParam;
                        document.title=data.title;
                        that.$nextTick(function () {
                           
                            var divHeight = document.body.clientWidth;
                            that.styleObject.height = divHeight + "px";
                            // that.styleObject.lineHeight = divHeight + "px";
                            console.log(that.styleObject);
                            var mySwiper = new Swiper('#swiper-container', {
                                pagination: {
                                    el: '#swiper-pagination',
                                },
                                autoplay: false,
                                lazy: {
                                    loadPrevNext: true,
                                },
                                loop: false
                            })
                        });
                    }
                }).catch(function (err) {
                    console.log(err);
                    mui.hideLoading();
                    that.msg = "该商品不存在";
                    that.error = true;
                    // mui.alert("获取数据失败");
                });
            },
            callback: function (val) {
                // this.dialog = false;
                this.share = false;
                return this.flag
            }
        },
        mounted() {
            // var divHeight = document.body.clientWidth;
            const that = this;
            that.theRequest = that.getUrl();
            that.getMessage();
            mui.previewImage();
            that.mask = mui.createMask(that.callback); //callback为用户点击silde蒙版时自动执行的回调；
            // that.mask.show();
            window.onresize = function () {
                return function () {
                    var divHeight = document.body.clientWidth;
                    that.styleObject.height = divHeight + "px";
                    // that.styleObject.lineHeight = divHeight + "px";
                }()
            }
        }
    })
</script>